<template>
  <div class="search-container">
    <!-- 搜索类型切换 -->
    <div class="search-header">
      <div class="search-tabs">
        <Button 
          :type="searchType === 'article' ? 'primary' : 'default'"
          @click="searchArticle"
          class="tab-btn"
        >
          <Icon type="ios-paper" />
          搜索文章
        </Button>
        <Button 
          :type="searchType === 'user' ? 'primary' : 'default'"
          @click="searchUser"
          class="tab-btn"
        >
          <Icon type="ios-people" />
          搜索用户
        </Button>
      </div>
      <div class="search-info">
        搜索 "{{ searchKeyword }}" 的结果
      </div>
    </div>

    <!-- 搜索结果展示 -->
    <div class="search-results">
      <!-- 用户搜索结果 -->
      <div v-if="searchType === 'user'" class="user-results">
        <div v-if="searchData.user && searchData.user.length > 0">
          <div class="result-header">
            <Icon type="ios-people" />
            找到 {{ searchData.user.length }} 个相关用户
          </div>
          <Card class="user-list">
            <div v-for="item in searchData.user" 
                 :key="item.id"
                 class="user-item"
                 @click="goToUserPage(item.id)">
              <div class="user-avatar">
                <img :src="item.avatar" :alt="item.nickname">
              </div>
              <div class="user-info">
                <div class="user-name">{{ item.nickname }}</div>
                <div class="user-meta">
                  <span>
                    <Icon type="ios-people-outline" />
                    {{ item.fansCount }} 粉丝
                  </span>
                  <span>
                    <Icon type="ios-heart-outline" />
                    {{ item.followCount }} 关注
                  </span>
                </div>
              </div>
            </div>
          </Card>
        </div>
        <div v-else class="no-result">
          <Icon type="ios-sad" size="30"/>
          <p>未找到相关用户</p>
        </div>
      </div>

      <!-- 文章搜索结果 -->
      <div v-if="searchType === 'article'" class="article-results">
        <div v-if="searchData.article && searchData.article.length > 0">
          <div class="result-header">
            <Icon type="ios-paper" />
            找到 {{ searchData.article.length }} 篇相关文章
          </div>
          <Card class="article-list">
            <SXQFriendUpdateList 
              :friend-list="searchData.article" 
              :callback="searchArticle"
            />
          </Card>
        </div>
        <div v-else class="no-result">
          <Icon type="ios-sad" size="30"/>
          <p>未找到相关文章</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SXQUserItem from "@/components/SXQ-UserItem";
import {getFriendUpdatesVOByTitle, getUserByName} from "@/api/api";
import SXQFriendUpdateList from "@/components/SXQ-FriendUpdateList";

export default {
  name: "SearchPage",
  components: {SXQFriendUpdateList, SXQUserItem},
  
  data() {
    return {
      searchData: {
        article: [],
        user: []
      },
      searchType: 'article', // 默认搜索文章
      searchKeyword: ''
    }
  },

  created() {
    this.searchKeyword = this.$route.query.searchValue || '';
    this.searchArticle(); // 默认搜索文章
  },

  methods: {
    searchArticle() {
      this.searchType = 'article';
      this.searchData.user = null;
      let param = this.searchKeyword || '*';

      getFriendUpdatesVOByTitle(param).then(res => {
        if (res.body.code === 1) {
          let data = res.body.data;
          this.searchData.article = data.map(it => ({
            id: it.id,
            img: it.img,
            nums: [it.hitsCount, it.likeCount, it.commentCount, it.collectCount, it.shareCount],
            content: it.content,
            title: it.title,
            createTime: it.createTime,
            avatar: it.avatar,
            nickname: it.nickname,
            userId: it.userId
          }));
        } else {
          this.$Message.error(res.body.msg);
        }
      });
    },

    searchUser() {
      this.searchType = 'user';
      this.searchData.article = null;
      let param = this.searchKeyword || '*';

      getUserByName(param).then(res => {
        if (res.body.code === 1) {
          this.searchData.user = res.body.data;
        } else {
          this.$Message.error(res.body.msg);
        }
      });
    },

    goToUserPage(userId) {
      this.$router.push({
        path: '/PersonalPage',
        query: { userId }
      });
    }
  }
}
</script>

<style scoped>
.search-container {
  width: 75vw;
  margin: 20px auto;
}

.search-header {
  background: white;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.search-tabs {
  margin-bottom: 15px;
  display: flex;
  gap: 10px;
}

.tab-btn {
  display: flex;
  align-items: center;
  gap: 5px;
}

.search-info {
  color: #666;
  font-size: 14px;
}

.search-results {
  min-height: 400px;
}

.result-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
  color: #666;
  font-size: 14px;
}

.user-list, .article-list {
  background: white;
  border-radius: 10px;
  padding: 20px;
}

.user-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.3s;
}

.user-item:last-child {
  border-bottom: none;
}

.user-item:hover {
  background-color: #f8f8f8;
}

.user-avatar {
  margin-right: 15px;
}

.user-avatar img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.user-info {
  flex: 1;
  padding-right: 20px;
}

.user-name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 5px;
}

.user-meta {
  display: flex;
  gap: 15px;
  color: #666;
  font-size: 13px;
}

.user-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.no-result {
  text-align: center;
  padding: 40px;
  color: #999;
  background: white;
  border-radius: 10px;
}

.no-result p {
  margin-top: 10px;
}
</style>